<template>
  <div v-loading="showLoading">
    <div class="content-box">
      <div class="content-left">
        <div class="content-title">前十供应商信息</div>
        <div class="content-table">
          <el-table :data="paidTaxesDataList" border style="width: 100%">
            <el-table-column prop="sort" label="排名" align="center" />
            <el-table-column
              prop="buySaleName"
              label="供应商名称"
              align="center"
            />
            <el-table-column
              prop="sumAmount"
              label="采购额(元)"
              align="center"
            />
            <el-table-column
              align="center"
              prop="amountRate"
              label="金额占比(%)"
            ></el-table-column>
            <el-table-column label="是否关联方" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.relatedStatus ? "是" : "否" }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="content-right">
        <div class="content-title">前十销售客户信息</div>
        <div class="content-table">
          <el-table :data="redInvoiceInfoDataList" border style="width: 100%">
            <el-table-column prop="sort" label="排名" align="center" />
            <el-table-column
              prop="buySaleName"
              label="客户名称"
              align="center"
            ></el-table-column>
            <el-table-column
              label="销售额(元)"
              align="center"
              prop="sumAmount"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="amountRate"
              label="金额占比(%)"
            ></el-table-column>
            <el-table-column align="center" label="是否关联方">
              <template slot-scope="scope">
                <span>{{ scope.row.relatedStatus ? "是" : "否" }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSupplierList } from "@/api/report";
export default {
  name: "shoper",
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
    getSupplierList() {
      this.showLoading = true;
      let params = {
        enterpriseId: this.detailInfo.enterpriseId,
        createTime: this.detailInfo.createTime
      };
      getSupplierList(params)
        .then(res => {
          this.showLoading = true;
          this.redInvoiceInfoDataList = res.data.redInvoiceInfoDataList;
          this.paidTaxesDataList = res.data.paidTaxesDataList;
        })
        .finally(() => {
          this.showLoading = false;
        });
    }
  },
  data() {
    return {
      showLoading: false,
      redInvoiceInfoDataList: [], // 供应商
      paidTaxesDataList: [] // 销售客户
    };
  },
  created() {
    this.getSupplierList();
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.content-box {
  //display: flex;
  //width: 100%;
  //justify-content: space-between;
  .content-left {
    //width: 49%;
    margin-top: 20px;
  }
  .content-right {
    margin-top: 20px;
    //width: 49%;
  }
}
.content-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 500;
  color: #222222;
}
</style>
